<template>
    <div class="bg">
        <div class="header">
            <router-link to="/my" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">我的收藏</h1>
            <div class="header-btnRight"></div>
        </div>

        <div class="rec-list">
            <div class="rec-list-item"  v-for="(item,index) in collectArr" >
                   <router-link :to="'./show/'+item.goods_id">
                       <img class="rec-list-item-img" :src="item.goods_image">
                       <div class="rec-list-item-tit">{{item.goods_name}}</div>
                       <div class="rec-list-item-tit2">{{item.goods_englishname}}</div>
                   </router-link>
                    <div class="rec-list-item-price">
                        ¥ {{item.qujian1}}
                    </div>
                <img  class="rec-list-item-collectBtn" src="../assets/city-head-heart-hover.png"  @click="collectionFun(index,item.goods_id)" />
            </div>

        </div>
    </div>
</template>

<script>
    import {Toast} from "mint-ui"
    import config from "../store/config"
    import wxShare from "../store/wxShare"
    export default {
        name: "My-collect",
        data(){
            return{
                url:config.url,
                collectArr:[],
                collection:{
                    img:require('../assets/city-head-heart.png'),
                    imgHover:require('../assets/city-head-heart-hover.png')
                },

            }
        },
        methods:{
            getData() {
                let _that = this;
                _that.axios.post('wap/member/collection')
                    .then(res => {
                        var goods=[];
                        var reg=/^(http|https):\/\//;
                        res.data.goods.forEach((item)=>{
                            if(!reg.test(item.goods_image)){
                                item.goods_image=_that.url+item.goods_image
                            }
                            goods.push(item)
                        })
                        _that.collectArr=goods;
                    })
                    .catch(err => console.log(err));
            },
            // 收藏
            collectionFun(index,goods_id){
                if(!this.$store.state.token){
                    this.$router.push({path:"/my-login"})
                }
                this.axios.post('wapcollection', {'goods_id':goods_id})
                    .then(res => {
                        Toast({message: res.msg, duration: 1000});
                        var collectArr=this.collectArr;
                        collectArr.splice(index,1);
                        this.collectArr=collectArr;
                    })
                    .catch(err => console.log(err));
            },
            share() {
                wxShare({title: '我的收藏', debug: false}, function () {
                    console.log('分享成功')
                });
            }

        },
        mounted() {
            this.goods_id = this.$route.params.id;
            this.getData();
            window.addEventListener('scroll', this.handleScroll);
            this.share()
        },
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }
    .bg{
        background: $bgcolor1;
        min-height: 100%;
    }
    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }
    .rec{
        &-list{
            padding:rpx(30);
            &-item{
                position: relative;
                border-radius:0 0 $radius6 $radius6;
                background: $color0;
                margin-bottom: rpx(30);
                padding-bottom: rpx(20);
                &-img{
                    border-radius:$radius6 $radius6 0 0 ;
                    width: 100%;
                    height: rpx(390);
                }
                &-tit{
                    padding: rpx(30) rpx(30) 0 rpx(30) ;
                    font-size: rpx(36);
                    font-weight: bold;
                    line-height: 160%;
                }
                &-tit2{
                    padding: rpx(0) rpx(30) 0 rpx(30);
                    font-size: rpx(26);
                    line-height: 160%;
                }
                &-price{
                    padding: rpx(20) rpx(30) 0 rpx(30);
                    font-size: rpx(36);
                    font-weight: bold;
                    color: $color3;
                }
                &-date{
                    padding: rpx(20) rpx(30) rpx(30) ;
                    color: $color4;
                    font-size: rpx(26);
                    font-weight: normal;
                }
                &-collectBtn{
                    position: absolute;
                    right: rpx(40);
                    bottom: rpx(40);
                    width: rpx(48);
                    height: rpx(48);
                }
                &-tag{
                    position: absolute;
                    left:rpx(30);
                    top: rpx(310);
                    padding: rpx(10) rpx(30);
                    border-radius: $radius6;
                    background: $color3;
                    color: $color0;
                    font-size: rpx(26);
                }
            }
        }
    }



</style>